<template>
  <div>
    <el-dialog
      v-model="editVisible"
      width="43%"
      top="5%"
      :close-on-click-modal="false"
      @close="handleclose"
      title="设置"
    >
      <el-form>
        <el-form-item label="设置开始时间：" required>
          <el-date-picker
            style="width: 80%"
            value-format="YYYY-MM-DD"
            :clearable="false"
            type="date"
            v-model="add_form.startDate"
            placeholder="设置开始时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="设置结束时间：" required>
          <el-date-picker
            value-format="YYYY-MM-DD"
            style="width: 80%"
            :clearable="false"
            type="date"
            v-model="add_form.endDate"
            placeholder="设置结束时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="临时用房主题：" required>
          <el-input
            placeholder="请输入临时用房主题"
            style="width: 80%"
            v-model="add_form.temporaryTopic"
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleclose">取 消</el-button>
          <el-button type="primary" @click="handleSave">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";
import { dictionaries } from "../assets/js/dictionaries";
export default {
  components: {},
  setup(props, context) {
    console.log(context);
    const add_form = reactive(context.attrs.add_form);
    console.log(add_form);
    const editVisible = ref(context.attrs.editVisible);
    const handleclose = () => {
      editVisible.value = false;
      context.emit("handleclose", editVisible.value);
    };
    const handleSave = () => {
      if (!add_form.startDate) {
        ElMessage.error("请设置开始时间");
        return;
      } else if (!add_form.endDate) {
        ElMessage.error("请设置结束时间");
        return;
      } else if (!add_form.temporaryTopic) {
        ElMessage.error("请输入临时用房主题");
        return;
      }
      // editVisible.value = false;
      context.emit("handleSave", add_form, editVisible.value);
    };
    return {
      add_form,
      editVisible,
      handleSave,
      handleclose,
    };
  },
};
</script>
<style lang="less" scoped>
@import "../assets/css/common.css";
@import "../assets/css/device.less";
.el-input {
  width: 215px;
}
&:deep(.el-dialog) {
  background: #fff;
}
</style>
